<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .p{
            width:200px;
            height:200px;
        }
        .p1{
            background-color: grey;
            /*
            隐藏元素的两种方式：  1.visibility    2.display

            visibility：  1.show(默认)   2.hidden
                          该方式隐藏，会看不见对应元素，但元素仍然会站位，即只是看不见，但仍然在那里
            display：  none
                       该方式是真正的隐藏，不但看不见，而且元素不在占据位置，可以认为元素被删除了(事实上没有)
            */
            display:none;
        }
        .p2{
            background-color:green;
        }
    </style>
</head>
<body>
    <div class="p p1">1</div>
    <div class="p p2">2</div>
</body>
</html>